<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <el-card>
          <div class="center-title">
            <div class="title">地方补贴情况</div>
            <div class="nd-select countySelect">
              <el-select v-model="nd" popper-class="countyprop" @change="onNdChange">
                <el-option v-for="item in ndOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </div>
          </div>
          <div class="type">
            <div v-for="item in list" :key="item.title" class="typeItem">
              <div class="title">{{ item.title }}</div>
              <div class="num">{{ statisticData[item.field] }}亩</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryForm" label-width="80px">
            <el-form-item label="农户姓名" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            class="zylbTable"
            :row-class-name="tableRowClassName"
            :highlight-current-row="false"
            :data="tableData"
            style="width: 100%"
            :height="250"
          >
            <el-table-column prop="nhbh" label="农户编码" />
            <el-table-column prop="name" label="农户姓名" :width="100" />
            <el-table-column prop="sfzh" label="身份证号" :width="190" />
            <el-table-column prop="lxdh" label="联系电话" :width="150" />
            <el-table-column prop="qqqdscmj" label="确权确地实测面积(亩)" :width="120" />
            <el-table-column prop="cbczfcbd" label="承包存组非承包地(亩)" :width="120" />
            <el-table-column prop="lzlrgd" label="流转转入的耕地(亩)" :width="100" />
            <el-table-column prop="lzlcgd" label="流转转出的耕地(亩)" :width="100" />
            <el-table-column prop="kcmj" label="扣除面积(亩)" :width="120" />
            <el-table-column prop="sbbtmj" label="申请补贴面积(亩)" :width="100" />
          </el-table>
          <pagination
            v-if="totalCount > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="totalCount"
            layout="total,sizes, prev, pager, next"
            @pagination="getTableData"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const mapStore = useMapStore();
const cyzlValue = ref();
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: '',
  ssc: mapStore.szxcCountryText,
  year: ''
});

// 年度下拉
const nd = ref();
// 年度下拉选项
const ndOptions = ref([]);

const totalCount = ref(0);
// 统计数据
const statisticData = ref({});

const type = computed(() => {
  return mapStore.activeTab;
});
const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const list = ref([
  {
    title: '确权实测面积',
    num: '3366.38',
    field: 'qqqdscmj'
  },
  {
    title: '承包村组面积',
    num: '0',
    field: 'cbczfcbd'
  },
  {
    title: '流转入耕地面积',
    num: '22.99',
    field: 'lzlrgd'
  },
  {
    title: '流转出耕地面积',
    num: '1.5',
    field: 'lzlcgd'
  },
  {
    title: '扣除面积',
    num: '666.64',
    field: 'kcmj'
  },
  {
    title: '申报补贴面积',
    num: '2721.23',
    field: 'sbbtmj'
  }
]);
const tableData = ref([]);
const handleQuery = () => {
  getTableData();
};

// 获取统计数据
const getStaticData = () => {
  $szxcapi.hnbtTjQuery({ year: nd.value, ssc: country.value }).then((res: any) => {
    statisticData.value = res.data || {};
  });
};

// 获取表格数据
const getTableData = () => {
  $szxcapi.hnbtListQuery(queryParams.value).then((res: any) => {
    tableData.value = res.rows || [];
    totalCount.value = res.total || 0;
  });
};

// 获取年度下拉数据
const getNdOptions = () => {
  // 年度下拉查询
  $szxcapi.hnbtNdQuery({ ssc: country.value }).then((res: any) => {
    ndOptions.value = res.data || [];
    nd.value = res.data[0];
    queryParams.value.year = res.data[0];
    getStaticData();
    getTableData();
  });
};

// 年度改变
const onNdChange = (e: any) => {
  getStaticData();
};

const country = ref(useMapStore().szxcCountryText);
watch(
  () => useMapStore().szxcCountryText,
  (value) => {
    country.value = value;
    queryParams.value.ssc = value;
  }
);
onMounted(() => {
  getNdOptions();
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .center-title {
    font-weight: 700;
    font-size: 20px;
    color: white;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }
  .el-card {
    // background: rgb(15, 47, 83);
    background: #178af01a;
  }
  .type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 200px;
    .typeItem {
      margin: 0px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      font-size: 26px;
      .num {
        margin-top: 10px;
      }
    }
    .typeItem:nth-child(1) {
      background: rgb(105, 133, 233);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(2) {
      background: rgb(127, 120, 234);
      .num {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(3) {
      background: rgb(223, 130, 115);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(4) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(5) {
      background: rgb(109, 62, 236);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(6) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
  }
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    height: 30px;
    background-color: #178af01a !important;
    border: 0px;
  }
  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      padding: 0;
      border-bottom: 1px solid rgba(188, 227, 255, 0.49);
      border-image: linear-gradient(transparent, rgba(188, 227, 255, 0.9), transparent) 5 5;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }
}
.el-select {
  margin-left: 40px;
  :deep(.el-select__wrapper) {
    position: relative;
    color: #6dc6ff;
    background: linear-gradient(0deg, #063e67 0%, #0378aa 52%, #054b89 100%);
    border-radius: 5px;
    overflow: hidden;

    &::before {
      position: absolute;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid;
      border-image: linear-gradient(85deg, #39b6ff, #3faeff) 10 10;
    }
    width: 100px;
    font-family: Adobe Heiti Std;
    .el-select__selected-item.el-select__placeholder {
      color: #7fcdff;
    }
    .el-select__caret {
      color: #7fcdff;
    }
  }
}
.nd-select {
  position: absolute;
  right: 60px;
  top: 12px;
}
</style>
